<template>
  <div>
    <el-table :data="value" style="width: 100%;margin-top:5px;" max-height="640px" ref="multipleTable" border highlight-current-row @selection-change="handleSelectionChange">
      <el-table-column align="center" v-if="isShowSelection" lable="选择" style=" padding-left: 20px;"
        type="selection"
        width="55">
      </el-table-column>
      <el-table-column label="序号" prop="name"  type="index" :index="indexMethod"  align="center" width="50px">
        <!--<template slot-scope="scope"><span>{{scope.$index+( currentPage - 1) * pageSize + 1}} </span></template>-->
      </el-table-column>

      <!--兼容历史版本 competence == true 表示有权限查看-->
      <el-table-column v-if="item.isCompetence == false ? false : true" align="center" :show-overflow-tooltip="item.type === 'number' || item.type === 'image' || item.type === 'switchoff' ? false:true"  class-name="el-card__body"
                       v-for="(item, index) in tableColumnAttributes"
                       :key="index"
                       :prop="item.value"
                       :label="item.name"
                       :width="item.type == 'input' ? 145 : item.type === 'image' ? 151 : item.type === 'datetime' ? 240 : item.type === 'order' ? 130 : item.type === 'datetable' ? 145 : item.type === 'orderWidth' ? 130 : item.type === 'switchoff' ? item.width : item.type === 'dateinput' ? item.width ? item.width : 125 : item.width"
      >
        <div v-if="item.type === 'input'"  slot-scope="{row}">
            <el-input v-model="row[''+item.value+'']" :maxlength="item.maxlength ? item.maxlength : 16" :disabled="row.disabled ? row.disabled : false"  @change="item.changeFunc ? item.changeFunc(row) : function() { }"/>
        </div>
        <div v-else-if="item.type === 'inputStr'"  slot-scope="{row}">
          <el-input v-model="row[''+item.value+'']" :maxlength="item.maxlength ? item.maxlength : 16" :disabled="row.disabled ? row.disabled : false"  @change="item.changeFunc ? item.changeFunc(row) : function() { }"/>
        </div>
        <div v-else-if="item.type === 'inputStrTable'"  slot-scope="{row}">
          <el-input v-model="row[''+item.value+'']" :maxlength="item.maxlength ? item.maxlength : 500" :disabled="row.disabled ? row.disabled : false"  @change="item.changeFunc ? item.changeFunc(row) : function() { }"/>
        </div>
        <!--inputInt 支持整数   取数据值使用row-->
        <div v-else-if="item.type === 'inputInt'"  slot-scope="{row}">
          <el-input v-model="row[''+item.value+'']" :maxlength="item.maxlength ? item.maxlength : 10" :disabled="row.disabled ? row.disabled : false" oninput="value=value.match(/^\d*(\.?)/g)[0]" @input="item.changeFunc ? item.changeFunc(row) : function() { }"    @change="item.changeFunc ? item.changeFunc(row) : function() { }"/>
        </div>
        <!--inputNumber 支持小数 2 位-->
        <div v-else-if="item.type === 'inputNumber'"  slot-scope="{row}">
          <el-input v-model="row[''+item.value+'']" :maxlength="item.maxlength ? item.maxlength : 10" :disabled="row.disabled ? row.disabled : false" oninput="value=value.match(/^\d*(\.?\d{0,2})/g)[0]"   @change="item.changeFunc ? item.changeFunc(row) : function() { }"/>
        </div>

        <!---默认禁用---->
        <!--inputInt 支持整数   取数据值使用row-->
        <div v-else-if="item.type === 'inputIntDisabled'"  slot-scope="{row}">
          <el-input v-model="row[''+item.value+'']" :maxlength="item.maxlength ? item.maxlength : 10" :disabled="row.disabled ? false : true"  oninput="value=value.match(/^\d*(\.?\d{0,2})/g)[0]"    @change="item.changeFunc ? item.changeFunc(row) : function() { }"/>
        </div>

        <div v-else-if="item.type === 'dateinputDisabled'" slot-scope="{row}">
          <el-date-picker :disabled="row.disabled ? false : true"
                          v-model="row[''+item.value+'']"
                          type="date"
                          value-format="yyyy-MM-dd"
                          placeholder="选择日期">
          </el-date-picker>
        </div>

        <div v-else-if="item.type === 'inputDisabled'"  slot-scope="{row}">
          <el-input v-model="row[''+item.value+'']" :maxlength="item.maxlength ? item.maxlength : 8" :disabled="row.disabled ? false : true"  @change="item.changeFunc ? item.changeFunc(row) : function() { }"/>
        </div>
        <!---默认禁用---->

        <!--默认不需要disabled属性-->

        <div v-else-if="item.type === 'inputShow'"  slot-scope="{row}">
          <el-input v-model="row[''+item.value+'']" :maxlength="item.maxlength ? item.maxlength : 8" :disabled="row.showItem ? row.showItem : false"  oninput="value=value.match(/^\d*(\.?)/g)[0]"  @input="item.changeFunc ? item.changeFunc(row) : function() { }" @change="item.changeFunc ? item.changeFunc(row) : function() { }"/>
        </div>
        <div v-else-if="item.type === 'inputShowItem'"  slot-scope="{row}">
          <el-input v-model="row[''+item.value+'']" :maxlength="item.maxlength ? item.maxlength : 8" :disabled="row.showItems ? row.showItems : false" @input="item.changeFunc ? item.changeFunc(row) : function() { }" @change="item.changeFunc ? item.changeFunc(row) : function() { }"/>
        </div>
        <div v-else-if="item.type === 'selectShow'" slot-scope="{row}">
          <el-select v-model="row[''+ (item.valueId ? item.valueId : item.value ) +'']" :disabled="row.showItem ? row.showItem : false" placeholder="请选择" @change="typeof  item.action === 'function' ? item.action(row) : ''"  >
            <el-option
              v-for="item in item.options"
              :key="item.id"
              :value="item.id"
              :label="item.value">
            </el-option>
          </el-select>
        </div>
        <div v-else-if="item.type === 'inputIntShow'"  slot-scope="{row}">
          <el-input v-model="row[''+item.value+'']" :maxlength="item.maxlength ? item.maxlength : 8" :disabled="row.showItem ? row.showItem : false"  oninput="value=value.match(/^\d*(\.?\d{0,2})/g)[0]"  @change="item.changeFunc ? item.changeFunc(row) : function() { }"/>
        </div>
        <!--默认不需要disabled属性-->

        <!--number 左右加减器-->
        <div v-else-if="item.type === 'number'"  slot-scope="{row}">
          <el-input-number v-model="row[''+item.value+'']" :min="item.min" :max="item.max" :step="item.step" step-strictly :controls="false"
                     :style="'width:' + (item.width-15) + 'px'"
                    @change="item.changeFunc ? item.changeFunc(row) : function() { }"/>
        </div>
        <div v-else-if="item.type === 'text'" slot-scope="{row}"  style="padding-top: 5px">
          <span>{{ row[''+item.value+''] }}</span>
        </div>
        <div v-else-if="item.type === 'select'" slot-scope="{row}">
          <el-select v-model="row[''+ (item.valueId ? item.valueId : item.value ) +'']" clearable :disabled="row.disabled ? row.disabled : false" placeholder="请选择" @change="typeof  item.action === 'function' ? item.action(row) : ''"  >
            <el-option
              v-for="item in item.options"
              :key="item.id"
              :value="item.id"
              :label="item.value">
            </el-option>
          </el-select>
        </div>
        <div v-else-if="item.type === 'datetime'" slot-scope="{row}">
          <el-date-picker v-if
            v-model="row[''+item.value+'']"
            type="datetime"
            value-format="yyyy-MM-dd HH:mm:ss"
            placeholder="选择日期时间">
          </el-date-picker>
        </div>
        <div v-else-if="item.type == 'selectremote'" slot-scope="{row}">
          <el-select  @change="typeof item.action === 'function' ? item.action(row) : ''"
                      v-model="row[''+item.value+'']" :disabled="row.disabled ? row.disabled : false"
            filterable
            remote
            clearable
            reserve-keyword
            placeholder="请输入关键词"
            :remote-method="typeof item.remoteMethod === 'function' ? item.remoteMethod : ''"
            :loading="item.loading">
            <el-option
              v-for="item in item.options"
              :key="item.id"
              :label="item.value"
              :value="item.id">
            </el-option>
          </el-select>
        </div>
        <div v-else-if="item.type === 'dateinput'" slot-scope="{row}">
          <el-date-picker :disabled="row.disabled ? row.disabled : false"
                          v-model="row[''+item.value+'']"
                          type="date"
                          value-format="yyyy-MM-dd"
                          placeholder="选择日期">
          </el-date-picker>
        </div>
        <div v-else-if="item.type === 'image'" slot-scope="{row}" style="margin-left: -10px;">
          <img :src="row[''+item.value+'']" class="avatar-uploader-icon">
        </div>

        <div v-else-if="item.type === 'switchoff'" slot-scope="{row}" style="margin-left: -10px;">
          <el-switch  @change="item.changeFunc ? item.changeFunc(row) : function() { }"
            v-model="row[''+item.value+'']" >
          </el-switch>
        </div>

        <div v-else-if="item.wrap == 'wrap'">
            <span class="wrapfont">{{ row[''+item.value+''] }}</span>
        </div>
        <div v-else-if="item.type == 'competence'" style="height: 30px;padding-top: 5px">
          <span v-if="item.competence == true">{{ row[''+item.value+''] }}</span>
        </div>
        <div v-else-if="item.type == 'eltag'" >
          <el-tag :type="row.status == 2 ? 'success' : row.status == 3 ?  'danger' : 'warning'"   >{{row.status === 1 ? '充值中' : row.status === 2 ? '充值成功' : row.status === 3 ? "充值失败" : row.status === 4 ? "成功后取消的订单" :
            row.status === 5 ? "等待充值" :  row.status === 6 ? "退款成功" :  row.status === 7 ? "退款失败" :  row.status === 8 ? "失败后取消的订单"
            : row.status === 9 ? "缓存订单" : row.status === 10 ? "压单" :  row.status === 11 ? "人工" : '未知' }} </el-tag>
        </div>
        <div v-else style="height: 30px;padding-top: 5px">
          <span >{{ item.formatter ? item.formatter(row): row[''+item.value+'']}}</span>
        </div>
      </el-table-column>

      <el-table-column v-if="hasAction" fixed="right" label="操作" :width="width"  align="center" highlight-current-row="true" >
        <template v-slot="{row, column, $index}" >
          <slot name="action" :row="row" />
        </template>
      </el-table-column>
    </el-table>
    <el-row  style="margin-top:10px;">
      <el-pagination v-show="(isShowPage == 'undefined' || isShowPage == null) ? true : isShowPage "
        layout="total, sizes, prev, pager, next"
        :current-page="current"
        :page-sizes="[10, 20, 50, 100]"
        :page-size="pageSize"
        :total="totalCount"
        :hide-on-single-page="isShow"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      />
    </el-row>
  </div>
</template>

<script>
export default {
  name: 'DataTable',
  props: {
    hasAction: { type: Boolean, default: false },
    tableColumnAttributes: { type: Array, default: () => [] },
    totalCount: { type: Number, default: 0 },
    isShowSelection: { type: Boolean, default: false },
    isShowPage: { type: Boolean, default: true },
    current: { type: Number, default: 1 },
    value: { type: Array, default: () => [] },
    selectValue: { type: Array, default: () => [] },
    isShow: { type: Boolean, default: false },
    isCompetence : { type: Boolean, default: true },
    width: { type: Number, default: 100 },
    showOverflowTooltip: { type: Boolean, default: true }
  },
  data() {
    return {
      pageSize: 10,
      currentPage: 1
    }
  },
  created() {
    // 多选选中设置
    setTimeout(() => {
      if (this.selectValue && this.value) {
        this.value.forEach((value, index, err) => {
          this.selectValue.forEach(item => {
            if (value.id === item) {
              this.$refs.multipleTable.toggleRowSelection(value)
            }
          })
        })
      }
    }, 1000)
  },
  methods: {
    handleSizeChange(pageSize) {
      this.pageSize = pageSize
      this.$emit('size-change', pageSize)
    },
    handleCurrentChange(currentPage) {
      this.currentPage = currentPage
      this.$emit('current-change', currentPage)
    },
    handleSelectionChange(selection) {
      this.$emit('selection-change', selection)
    },
    indexMethod(index){
      return index+1 ;//+( this.current - 1) * this.pageSize + 1
    },
    formatterText(func,row){
      return func(row);
    }

  }, mounted() {

  }
}
</script>

<style lang="scss" scoped>
  .el-card__body{
    padding: 5px;
    color: red;
  }
  .avatar-uploader-icon {
    padding: 0px;
    font-size: 28px;
    color: #8c939d;
    width: 150px;
    height: 150px;
    line-height: 150px;
    cursor: pointer;
  }

  .wrapfont{
    word-wrap:break-word;
    word-break:break-all;
    overflow: hidden;
    white-space: pre-line;
  }
  .cell{

  }
  .el-table .cell {
    white-space: pre-line;
  }
</style>
